<template>
  <div id="industryRankPage" @click="bodyClick">
    <HeadNav
      type="industry"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="industry" sort="rankboard"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="品种榜"></a-tab-pane>
                    <a-tab-pane key="2" tab="类目榜"></a-tab-pane>
                    <!-- <a-tab-pane key="3" tab="作家榜"></a-tab-pane> -->
                  </a-tabs>
                </div>
              </div>
            </div>
            <div class="model-container">
              <div class="model-bg" style="padding: 10px 15px">
                <a-cascader
                  style="margin-right: 5px"
                  :field-names="{
                    label: 'name',
                    value: 'category_id',
                    children: 'child_list',
                  }"
                  :options="categoryList"
                  placeholder="所有类目"
                  change-on-select
                  :allowClear="false"
                  expand-trigger="hover"
                  v-model="chooseCategory"
                  @change="selectCategory"
                  v-if="tabKey !== '3'"
                />
                <a-select
                  v-model="dateType"
                  style="width: 120px"
                  @change="handleChange"
                >
                  <a-select-option value="4">年榜单</a-select-option>
                  <a-select-option value="3">月榜单</a-select-option>
                  <a-select-option value="2">周榜单</a-select-option>
                  <a-select-option value="1">日榜单</a-select-option>
                </a-select>
                <span
                  style="
                    display: inline-block;
                    vertical-align: top;
                    margin-left: 5px;
                  "
                >
                  <!-- 日数据 -->
                  <a-date-picker
                    v-model="chooseDate"
                    format="YYYY-MM-DD"
                    @change="dateChange"
                    inputReadOnly
                    :disabledDate="disabledEndDate"
                    v-if="dateType == 1"
                  >
                    <span class="text-btn">{{ dateText }}</span>
                  </a-date-picker>
                  <!-- 周数据 -->
                  <a-week-picker
                    v-model="chooseDate"
                    @change="weekChange"
                    inputReadOnly
                    :disabledDate="disabledEndWeek"
                    v-if="dateType == 2"
                  >
                    <span class="text-btn">{{ dateText }}</span>
                  </a-week-picker>
                  <!-- 月数据 -->
                  <a-month-picker
                    v-model="chooseDate"
                    @change="monthChange"
                    inputReadOnly
                    :disabledDate="disabledEndWeek"
                    v-if="dateType == 3"
                  >
                    <span class="text-btn">{{ dateText }}</span>
                  </a-month-picker>
                  <!-- 年数据 -->
                  <a-date-picker
                    v-model="chooseDate"
                    mode="year"
                    format="YYYY"
                    @change="dateChange"
                    :open="showYear"
                    @panelChange="yearChange($event)"
                    inputReadOnly
                    v-if="dateType == 4"
                  >
                    <span class="text-btn" @click.stop="openPicker">{{
                      dateText
                    }}</span>
                  </a-date-picker>
                </span>
              </div>
            </div>
            <!-- 列表 -->
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 530px;
                  position: relative;
                  padding-bottom: 60px;
                "
              >
                <div class="section-title">
                  <span v-if="tabKey == '1'">品种排行榜</span>
                  <span v-if="tabKey == '2'">类目排行榜</span>
                  <span v-if="tabKey == '3'">作家排行榜</span>
                  <span class="desc">{{ dateText }}</span>
                </div>
                <div class="table">
                  <!-- 品种 -->
                  <table style="table-layout: fixed" v-if="tabKey == '1'">
                    <colgroup>
                      <col width="55" />
                      <col width="320" />
                      <col width="160" />
                      <col width="160" />
                      <col width="160" />
                      <col width="100" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>品种</td>
                        <td>作者</td>
                        <td>出版社</td>
                        <td>类目</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">上期对比</td>
                      </tr>
                    </thead>
                    <tbody v-if="goodsList.length > 0">
                      <tr v-for="(item, index) in goodsList" :key="index">
                        <td>{{ item.rank }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="goods-name click-font"
                              :title="item.goods_name"
                              @click="$toDetail(item.goods_id)"
                              >{{ item.goods_name }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <div class="author">
                            <div
                              class="author-name"
                              v-if="item.authors.length == 0"
                            >
                              {{ item.goods_author }}
                            </div>
                            <div
                              class="author-name click-font"
                              v-if="item.authors.length == 1"
                              @click.stop="$toAuthor(item.authors[0].author_id)"
                            >
                              {{ item.goods_author }}
                            </div>
                            <div
                              class="author-name click-font"
                              v-if="item.authors.length > 1"
                              @click.stop="openAuthor(item, index)"
                            >
                              {{ item.goods_author }}
                            </div>
                            <div class="author-list" v-if="item.active">
                              <div v-if="item.authors.length > 0">
                                <div
                                  class="author-item click"
                                  v-for="(aitem, aindex) in item.authors"
                                  :key="aindex"
                                  @click.stop="$toAuthor(aitem.author_id)"
                                >
                                  {{ aitem.name }}
                                </div>
                              </div>
                              <div v-else>
                                <div class="author-item">
                                  未查询到对应作者信息
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>
                          {{ item.publisher_name }}
                        </td>
                        <td>
                          <span>{{ item.cate_node_2 }}</span>
                          <span v-if="item.cate_node_3"
                            >> {{ item.cate_node_3 }}</span
                          >
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_amount.toLocaleString()
                          }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                        <!-- <td style="text-align: right">{{ item.rank_cate }}</td> -->
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="7" style="text-align: center">
                          <div style="margin-top: 100px">
                            <a-empty />
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <!-- 类目 -->
                  <table style="table-layout: fixed" v-if="tabKey == '2'">
                    <colgroup>
                      <col width="55" />
                      <col width="635" />
                      <col width="100" />
                      <col width="100" />
                      <col width="160" />
                      <col width="425" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>类目</td>
                        <td style="text-align: right">销售指数</td>
                        <td style="text-align: right">占比</td>
                        <td style="text-align: right">上期对比</td>
                      </tr>
                    </thead>
                    <tbody v-if="cateList.length > 0">
                      <tr v-for="(item, index) in cateList" :key="index">
                        <td>{{ item.sale_rank }}</td>
                        <td>
                          <span class="main-font">{{ item.name }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_total.toLocaleString()
                          }}</span>
                        </td>
                        <td style="text-align: right">{{ item.ratio }}%</td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="5" style="text-align: center">
                          <div style="margin-top: 100px">
                            <a-empty />
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table style="table-layout: fixed" v-if="tabKey == '3'">
                    <colgroup>
                      <col width="55" />
                      <col width="300" />
                      <col width="100" />
                      <col width="100" />
                      <col width="100" />
                      <col width="400" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>作者</td>
                        <td>国家</td>
                        <td>生日</td>
                        <td>作品数</td>
                        <td style="text-align: right">当期销售指数</td>
                      </tr>
                    </thead>
                    <tbody v-if="authorList.length > 0">
                      <tr v-for="(item, index) in authorList" :key="index">
                        <td>{{ index + 1 + (pageSize * page - pageSize) }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.photo">
                              <img
                                :src="item.photo"
                                alt
                                style="width: 40px; height: 40px"
                              />
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.name"
                              @click="$toAuthor(item.author_id)"
                              >{{ item.name }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <span v-if="item.country">[{{ item.country }}]</span>
                          <span v-else>--</span>
                        </td>
                        <td>{{ item.birth_date ? item.birth_date : "--" }}</td>
                        <td>{{ item.goods_count }}个</td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.sale_amount.toLocaleString()
                          }}</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="6" style="text-align: center">
                          <div style="margin-top: 100px">
                            <a-empty />
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div
                  style="
                    text-align: right;
                    position: absolute;
                    bottom: 15px;
                    right: 15px;
                  "
                  v-if="tabKey == '3'"
                >
                  <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    :total="total"
                    v-model="page"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style lang="scss" scoped>
.text-btn{
  display: inline-block;
  font-size: $fontSize - 2;
  color: $fontColor1;
  padding: 0 15px;
  line-height: 30px;
  border:1px solid $themeColor20;
  border-radius: 4px;
  cursor: pointer;
}
</style>
<script>
import { COMMON_CATEGORY } from "../../apis/common.js";
import {
  INDUSTRY_RANK_GOODS,
  INDUSTRY_RANK_CATE,
  INDUSTRY_RANK_AUTHOR,
} from "../../apis/industry.js";
export default {
  data() {
    return {
      pagePower: true,
      tabKey: "1",
      categoryList: [],
      chooseCategory: [0],
      isLoading: true,
      chooseDate: null,
      dateType: "4",
      dateText: "",
      cycle: "",
      oneDay: "",
      showYear: false,
      goodsList: [],
      cateList: [],
      authorList: [],
      total: 0,
      page: 1,
      pageSize: 20,
    };
  },
  mounted() {
    this.chooseDate = this.$moment().format("YYYY");
    this.dateText = this.$moment().format("YYYY年");
    this.cycle = this.$moment().format("YYYY");
    this.oneDay = this.$moment().format("YYYYMMDD");
    this.getFirstCategory();
    if(this.$route.query.tabKey){
      this.tabKey = this.$route.query.tabKey;
      this.getCateData();
    }else{
      this.getGoodsData();
    }
  },
  methods: {
    // 品种
    async getGoodsData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.dateType,
        start_date: this.oneDay,
        period: this.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        page: 1,
        page_size: 100,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_RANK_GOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsList = [];
        res.data.result.map((value, key) => {
          value.active = false;
          this.goodsList.push(value);
        });
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 类目
    async getCateData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.dateType,
        start_date: this.oneDay,
        period: this.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        page: 1,
        page_size: 100,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_RANK_CATE(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.cateList = [];
        this.cateList = res.data;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 作者
    async getAuthorData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        date_type: this.dateType,
        start_date: this.oneDay,
        period: this.cycle,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_RANK_AUTHOR(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.authorList = [];
        this.total = res.data.total_count;
        this.authorList = res.data.result;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取初级分类列表
    async getFirstCategory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        // floor: 2,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_CATEGORY(data);
      if (res.code == 0) {
        this.categoryList = [];
        let _data = {
          category_id: 0,
          name: "所有类目",
          pid: 0,
        };
        this.categoryList.push(_data);
        res.data.map((value, key) => {
          this.categoryList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    callback(key) {
      this.tabKey = key;
      this.isLoading = true;
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    onShowSizeChange(current, pageSize) {
      this.isLoading = true;
      this.page = current;
      this.getAuthorData();
    },
    // 选择分类
    selectCategory(value, selectedOptions) {
      // console.log(value,selectedOptions)
      this.isLoading = true;
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    // 时间榜单类型切换
    handleChange(value) {
      this.isLoading = true;
      if (value == 1) {
        this.chooseDate = this.$beforeDate();
        this.dateText = this.$moment(this.$beforeDate()).format(
          "YYYY年MM月DD日"
        );
        this.cycle = this.$moment(this.$beforeDate()).format("YYYYMMDD");
        this.oneDay = this.$moment(this.$beforeDate()).format("YYYYMMDD");
      } else if (value == 2) {
        this.chooseDate = this.$moment().format("YYYY-MM-DD");
        this.cycle = this.$getCurrenWeek(this.$moment().format("YYYY-MM-DD"));
        let _str = this.cycle,
          start = this.$moment().day(1).format("YYYY-MM-DD"),
          end = this.$moment().format("YYYY-MM-DD");
        this.dateText =
          _str.slice(0, 4) +
          "年第" +
          _str.slice(4, 6) +
          "周（" +
          start +
          "~" +
          end +
          "）";
        this.oneDay = this.$moment().format("YYYYMMDD");
      } else if (value == 3) {
        this.chooseDate = this.$moment().format("YYYY-MM-DD");
        this.dateText = this.$moment().format("YYYY年MM月");
        this.cycle = this.$moment().format("YYYYMM");
        this.oneDay = this.$moment().format("YYYYMMDD");
      } else if (value == 4) {
        this.chooseDate = this.$moment().format("YYYY");
        this.dateText = this.$moment().format("YYYY年");
        this.cycle = this.$moment().format("YYYY");
        this.oneDay = this.$moment().format("YYYYMMDD");
      }
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    // 日数据选择
    dateChange(date, dateString) {
      this.isLoading = true;
      const startDate = dateString;
      this.chooseDate = startDate;
      this.dateText = this.$moment(startDate).format("YYYY年MM月DD日");
      this.cycle = startDate.replace(/-/g, "");
      this.oneDay = startDate.replace(/-/g, "");
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    // 周数据选择
    weekChange(date, dateString) {
      this.isLoading = true;
      // var _day = date._d.getDate();
      const startDate = date.day(1).format("YYYY-MM-DD"); // 周一日期
      const endDate = date.day(7).format("YYYY-MM-DD"); // 周日日期
      let _weekth = date.week();
      if (_weekth < 10) {
        _weekth = "0" + _weekth;
      }
      this.chooseDate = startDate;
      let diffs = this.$moment(endDate).diff(this.$moment(), "days");
      if (diffs > 0) {
        this.dateText =
          dateString.split("-")[0] +
          "第" +
          _weekth +
          "周（" +
          startDate +
          "~" +
          this.$moment().format("YYYY-MM-DD") +
          "）";
      } else {
        this.dateText =
          dateString.split("-")[0] +
          "第" +
          _weekth +
          "周（" +
          startDate +
          "~" +
          endDate +
          "）";
      }
      this.cycle = dateString.split("-")[0] + _weekth;
      this.oneDay = startDate.replace(/-/g, "");
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    // 月数据选择
    monthChange(date, dateString) {
      this.isLoading = true;
      const startDate = date
        .month(date.month())
        .startOf("month")
        .format("YYYY-MM-DD");
      let _month = date.month() + 1;
      if (_month < 10) {
        _month = "0" + _month;
      }
      this.chooseDate = startDate;
      this.dateText = dateString.split("-")[0] + "年" + _month + "月";
      this.cycle = dateString.split("-")[0] + _month;
      this.oneDay = startDate.replace(/-/g, "");
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    // 年数据选择
    yearChange(e) {
      this.isLoading = true;
      if (e._d.getFullYear().toString() >= this.$moment().format("YYYY")) {
        this.chooseDate = this.$moment().format("YYYY");
      } else {
        this.chooseDate = e._d.getFullYear().toString();
      }
      this.cycle = this.chooseDate;
      this.oneDay = this.$moment(this.chooseDate).format("YYYYMMDD");
      this.dateText = this.$moment(this.chooseDate).format("YYYY年");
      this.showYear = false;
      if (this.tabKey == "1") {
        this.getGoodsData();
      } else if (this.tabKey == "2") {
        this.getCateData();
      } else if (this.tabKey == "3") {
        this.page = 1;
        this.getAuthorData();
      }
    },
    openAuthor(item, index) {
      this.showYear = false;
      this.goodsList = this.goodsList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    bodyClick() {
      this.goodsList = this.goodsList.map((value, key) => {
        value.active = false;
        return value;
      });
      this.showYear = false;
    },
    openPicker() {
      this.goodsList = this.goodsList.map((value, key) => {
        value.active = false;
        return value;
      });
      this.showYear = true;
    },
    // 不可选择时间
    disabledEndDate(endValue) {
      const startValue = this.$moment().subtract(1, "days");
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() < endValue.valueOf();
    },
    disabledEndWeek(endValue) {
      const startValue = this.$moment();
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() <= endValue.valueOf();
    },
    publisherChange() {
      this.isLoading = true;
      this.tabKey = "1";
      this.chooseCategory = [0];
      this.dateType = "4";
      this.showYear = false;
      this.page = 1;
      this.chooseDate = this.$moment().format("YYYY");
      this.dateText = this.$moment().format("YYYY年");
      this.cycle = this.$moment().format("YYYY");
      this.oneDay = this.$moment().format("YYYYMMDD");
      this.getGoodsData();
    },
  },
};
</script>